<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>

</body>
<script>
	// - 方式一: Object构造函数模式
	// - 套路: 先创建空Object对象, 再动态添加属性/方法
	// - 适用场景: 起始时不确定对象内部数据
	// - 问题: 语句太多
	// {
	// 	const obj = new Object({
	// 		c:3,
	// 		d:4
	// 	});
	// 	obj.a = 1;
	// 	obj.b = 2;
	// 	console.log(obj);
	// }
	
	// * 方式二: 对象字面量模式
	// * 套路: 使用{}创建对象, 同时指定属性/方法
	// * 适用场景: 起始时对象内部数据是确定的
	// * 问题: 如果创建多个同结构的对象, 有重复代码
	// {
	// 	const obj = {
	// 		a:1,
	// 		b:2
	// 	}
	// 	obj.c = 3;
	// 	obj.d = 4;
	// 	console.log(obj);
	// }
	
	
	// * 方式三: 工厂模式
	// - 套路: 通过工厂函数动态创建对象并返回
	// - 适用场景: 需要创建多个对象
	// - 问题: 对象没有一个具体的类型, 都是Object类型
	{
		// const obj = {
		// 	userName:"zhangsan",
		// 	age:12
		// }
		// const obj2 = {
		// 	userName:"lisi",
		// 	age:13
		// }
		
		// function creator(userName,age){
		// 	return {
		// 		userName,
		// 		age
		// 	}
		// }
		// const obj = creator("zhangsan",12);
		// const obj2 = creator("lisi",13);
		// console.log(obj === obj2);// false
		// console.log(typeof obj);// object
		// console.log(typeof obj2);// object
		// console.log(obj.constructor)
		// console.log(obj2.constructor)
		// console.log(obj.constructor === obj2.constructor)
	}
	
	// * 方式四: 自定义构造函数模式
	// * 套路: 自定义构造函数, 通过new创建对象
	// * 适用场景: 需要创建多个类型确定的对象
	// * 问题: 每个对象都有相同的数据, 浪费内存
	// {
	// 	const Box = function(userName,age){
	// 		this.username = userName;
	// 		this.age = age;
	// 		// 生成的每个实例中都拥有fn,浪费内存。
	// 		this.fn = function(){
	// 			console.log(this.username,this.age);
	// 		}
	// 	}
	// 	const obj = new Box("zhangsan",12);
	// 	const obj2 = new Box("lisi",13);
	// 	console.log(obj,obj2);
	// 	console.log(obj.constructor===Box);
	// 	console.log(obj2.constructor===Box);
	// 	obj.fn();
	// 	obj2.fn();
	// 	console.log(obj.fn === obj2.fn);
	// }
	
	// * 方式五: 构造函数+原型的组合模式
	// * 套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
	// * 适用场景: 需要创建多个类型确定的对象
	{
		const Box = function(userName,age){
			this.userName = userName;
			this.age = age;
		}
		Box.prototype.fn = function(){
			console.log(this.userName,this.age);
		}
		const obj = new Box("zhangsan",12);
		const obj2 = new Box("lisi",13);
		obj.fn();
		obj2.fn();
		console.log(obj.__proto__ === obj2.__proto__);
		console.log(obj.__proto__.fn === obj2.__proto__.fn);
		console.log(obj.fn === obj2.fn);
		
	}
</script>
</html>